<template>
  <div :class="isPhone ? '' : 'cascader-container'">
    <!-- 省份选择 -->
    <el-select
      v-model="company"
      :disabled="allDisable"
      placeholder="请选公司"
      clearable
      filterable
      :multiple="level == 1"
      @change="handlecompanyChange"
      style="width: 200px; margin-right: 10px"
    >
      <el-option
        v-for="item in companys"
        :key="item.company_id"
        :label="item.company_name"
        :value="item.company_id"
      />
    </el-select>

    <!-- 城市选择 -->
    <el-select
      v-if="company && level >= 2"
      v-model="community"
      :disabled="allDisable"
      placeholder="请选择项目"
      clearable
      filterable
      :multiple="level == 2"
      @change="handlecommunityChange"
      style="width: 200px; margin-right: 10px"
    >
      <el-option
        v-for="item in communitys"
        :key="item.community_id"
        :label="item.community_name"
        :value="item.community_id"
      />
    </el-select>

    <!-- 区县选择 -->
    <el-select
      v-if="community && level == 3"
      :disabled="allDisable"
      v-model="department"
      placeholder="请选择部门"
      clearable
      filterable
      :multiple="level == 3"
      style="width: 200px"
      @change="emitEve"
    >
      <el-option
        v-for="item in departments"
        :key="item.department_id"
        :label="item.department_name"
        :value="item.department_id"
      />
    </el-select>
  </div>
</template>

<script>
import api from "@/request/api.js";
export default {
  name: "RegionCascader",
  props: {
    isPhone: {
      type: Boolean,
      default: false,
    },
    level: {
      type: Number,
      default: 1,
    },
    allDisable: {
      type: Boolean,
      default: false,
    },
    rDataType: {
      type: String,
      default: "arr",
    },
    compontentObj: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {
          company_id: "",
          community_id: "",
          department_id: "",
        };
      },
    },
  },
  data() {
    return {
      // 数据存储
      regionData: [],
      // 展示数据
      companys: [],
      communitys: [],
      departments: [],
      // 选中值
      company: "",
      community: "",
      department: "",
      companyArr: [],
    };
  },
  mounted() {
    this.company = this.compontentObj.company_id;
    this.handlecompanyChange(this.company, true);
    this.community = this.compontentObj.community_id;
    this.handlecommunityChange(this.community, true);
    this.department = this.compontentObj.department_id;
    this.loadcompanys();
  },
  methods: {
    setobjInfo(
      obj = {
        company_id: "",
        community_id: "",
        department_id: "",
      }
    ) {
      this.company = obj.company_id;
      if (!Array.isArray(obj.company_id)) {
        this.handlecompanyChange(this.company, true);
      }
      this.community = obj.community_id;
      if (!Array.isArray(obj.community_id)) {
        this.handlecommunityChange(this.community, true);
      }
      this.department = obj.department_id;
      this.$emit("change", {
        company_id: this.company,
        community_id: this.community,
        department_id: this.department,
      });
    },
    clearDate(val) {
      this.company = "";
      this.community = "";
      this.department = "";
      this.companys.length = 0;
      if (val == 3) {
        this.companys.push({
          company_name: "全部",
          company_id: "-1",
        });
      }
      this.companys.push(...this.companyArr);
    },
    // 加载公司数据
    loadcompanys() {
      api.company
        .getCompanyListApi({
          company_id_str: "",
          page: 1,
          search: "",
          size: 999,
        })
        .then((res) => {
          if (res?.status == 200) {
            this.companys.length = 0;
            this.companyArr.push(...res.data.content.data);
            this.companys.push(...res.data.content.data);
          }
        });
    },
    // 公司变化处理
    handlecompanyChange(val, init = false) {
      if (!init) {
        this.community = "";
        this.communitys = [];
        this.department = "";
        this.departments = [];
      }
      if (!val) {
        this.communitys = [];
        return;
      }

      if (this.company.toString().indexOf("-1") == -1) {
        api.company.getCommunityListByCompanyIdApi(val).then((res) => {
          if (res?.status == 200) {
            this.communitys.length = 0;
            console.log;
            if (this.level == 2) {
              this.communitys.push({
                community_name: "全部",
                community_id: "-1",
              });
            }
            this.communitys.push(...res.data.content.data);
          }
        });
      }
      if (!init) {
        this.emitEve();
      }
    },
    // 城市变化处理
    handlecommunityChange(val, init = false) {
      if (!init) {
        this.department = "";
      }
      if (!val) {
        this.departments = [];
        return;
      }
      if (this.community.toString().indexOf("-1") == -1) {
        api.company.getDepartmentListApi(this.company, val).then((res) => {
          if (res?.status == 200) {
            this.departments.length = 0;
            if (this.level == 3) {
              this.departments.push({
                department_name: "全部",
                department_id: "-1",
              });
            }

            this.departments.push(...res.data.content.data);
          }
        });
      }

      if (!init) {
        this.emitEve();
      }
    },
    // 获取完整选择结果
    getSelectedRegion() {
      return {
        company: this.company,
        community: this.community,
        department: this.department,
        companyObj: this.companys.find((item) => item.code === this.company),
        communityObj: this.communitys.find(
          (item) => item.code === this.community
        ),
        departmentObj: this.departments.find(
          (item) => item.code === this.department
        ),
      };
    },
    // 重置选择
    reset() {
      this.company = "";
      this.community = "";
      this.department = "";
      this.communitys = [];
      this.departments = [];
    },
    emitEve() {
      //   console.log(this.rDataType);
      if (this.rDataType == "arr") {
        if (this.level == 0) {
          this.$emit("change", [
            {
              company_id: this.company,
              community_id: 0,
              department_id: 0,
            },
          ]);
        }
        const arr = [];
        if (this.level == 1) {
          if (this.company.length == 0) {
            this.$emit("change", []);
            return;
          }
          for (let index = 0; index < this.company.length; index++) {
            const element = this.company[index];
            if (element == "-1") {
              this.$emit("change", []);
              return;
            } else {
              arr.push({
                company_id: element,
                community_id: 0,
                department_id: 0,
              });
            }
          }
          this.$emit("change", arr);
        }
        if (this.level == 2) {
          if (this.community.length == 0) {
            this.$emit("change", []);
            return;
          }
          for (let index = 0; index < this.community.length; index++) {
            const element = this.community[index];
            if (element == "-1") {
              this.$emit("change", [
                {
                  company_id: this.company,
                  community_id: 0,
                  department_id: 0,
                },
              ]);
              return;
            } else {
              arr.push({
                company_id: this.company,
                community_id: element,
                department_id: 0,
              });
            }
          }
          this.$emit("change", arr);
        }
        if (this.level == 3) {
          if (this.department.length == 0) {
            this.$emit("change", []);
            return;
          }
          for (let index = 0; index < this.department.length; index++) {
            const element = this.department[index];
            if (element == "-1") {
              this.$emit("change", [
                {
                  company_id: this.company,
                  community_id: this.community,
                  department_id: 0,
                },
              ]);
              return;
            } else {
              arr.push({
                company_id: this.company,
                community_id: this.community,
                department_id: element,
              });
            }
          }
          this.$emit("change", arr);
        }
        return;
      } else {
        this.$emit("change", {
          company_id: this.company,
          community_id: this.community,
          department_id: this.department,
        });
      }
    },
  },
};
</script>

<style scoped>
.cascader-container {
  display: flex;
  align-items: center;
}
</style>
